<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />

      <!-- 左上角按钮 -->
      <div class="table-left-top">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增房间</el-button>
      </div>

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="roomName" label="房间名称" />
          <el-table-column prop="introduce" label="房间介绍" />
          <el-table-column prop="roomTypeName" label="房间类型" />
          <el-table-column prop="price" label="房间价格">
            <template slot-scope="scope">
              {{scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column label="房间标签">
            <template slot-scope="scope">
              <el-tag type="success" v-for="(item,index) in scope.row.labelList" :key="index">{{item.labelName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="100">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="codeEwm(scope.row,true)">房间二维码</el-button>
              <el-button type="text" size="small" @click="codeEwm(scope.row,false)">点单二维码</el-button> -->
              <el-button size="mini" type="text" @click="editPop(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="delBtn(scope.row)">删除</el-button>
              <!-- <el-button size="mini" type="text" @click="see(scope.row)">查看绑定套餐</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page_box" v-show="total>0">
        <pagination
          :page.sync="params.current"
          :limit.sync="params.size"
          @pagination="getList"
          :total="total"
        />
      </div>

      <!-- 编辑或新增 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.id ? '编辑房间' : '新增房间'"
        :visible.sync="dialog"
        width="850px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <form-room :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>

      <!-- 查看套餐 -->
      <el-dialog
        title="美团套餐"
        :visible.sync="mtdialog"
        width="850px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <el-button
            style="margin-bottom:10px"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addTimeSlot"
        >新增</el-button>
        <el-table :data="timeModelList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column width="150" label="小时数" align="center" prop="hourage">
              <template slot-scope="scope">
                <el-input :disabled="scope.row.isXiugai" v-model="scope.row.hourage" placeholder="请输入小时"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="美团套餐id" align="center" prop="mtDealId">
              <template slot-scope="scope">
                <el-input :disabled="scope.row.isXiugai" v-model="scope.row.mtDealId" placeholder="请输入套餐id"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="closeTimeSlot(scope.$index,scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="xiugai(scope.$index)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitTimeSlot">确 定</el-button>
          <el-button @click="mtdialog = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>

    <!-- 生成二维码弹窗 -->
    <el-dialog
      :title="roomTitle"
      :visible.sync="dialogEwm"
      width="30%"
      :before-close="handleClose">
      <el-image :src="ewmSrc"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="baocunEwm">保存图片</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import FormRoom from './FormRoom.vue'
import { pageRoom, delRoom,addMtMapping,getMtMappingList,delMtMapping,updateMtMapping,createAppletCode } from '@/api/user'
export default {
  name: 'StoreList',
  components: { SearchForm, FormRoom },
  data() {
    return {
      params: {
        current: 1,
        size: 10,
        storeId: '766639530495164416'
      },
      loading: false,
      listData: [],
      total: 0,
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
      mtdialog:false,
      timeModelList:[],
      query:{
        roomId:'',
        storeId:'',
      },
      isXiugai:false,
      tableIndex:-1,
      dialogEwm:false,
      ewmSrc:'',
      roomTitle:''
    }
  },
  computed: {
    formItems() {
      // 状态
      const statusOptions = [
        { label: '啊啊', value: 0 },
        { label: '啊啊', value: 1 }
      ]

      // 构建搜索表单
      return [
        { title: '房间名称', type: 'input', key: 'roomName', maxlength: 30 },
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 生成二维码
    codeEwm(e,state){
      console.log(e)
      this.roomTitle = e.roomName
      let data = {
        roomId:e.id
      }
      if(state){// 房间
        data.type = 0
      }else{// 商品
        data.type = 1
      }
      const loading = this.$loading({
        lock: true,
        text: '生成中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      createAppletCode(data).then(res=>{
        console.log(res)
        if(res.statusCode === '00000'){
          setTimeout(() => {
            this.dialogEwm = true
            this.ewmSrc = res.data
            loading.close();
          }, 1000);
        }else{
          loading.close();
        }
      })
    },

    // 保存二维码
    baocunEwm(){
      window.open(this.ewmSrc, "_blank");
    },

    // 套餐提交
    submitTimeSlot(){
      let obj = this.timeModelList[this.tableIndex]
      console.log(this.timeModelList[this.tableIndex])
      this.query.hourage = obj.hourage
      this.query.mtDealId = obj.mtDealId
      console.log(this.query)
      let msg = ''
      if(obj.id){
        this.query.id = obj.id
        msg = '修改成功'
      }else{
        msg = '新增成功'
      }
      let returnValue = obj.id?updateMtMapping(this.query):addMtMapping(this.query)
      returnValue.then(res=>{
        if (res.statusCode === '00000') {
          this.$message({
            message: msg,
            type: 'success'
          })
          this.mtdialog = false
        }
      })
    },

    // 添加价格模板输入框
    addTimeSlot(){
      let arr = {
        hourage:'',
        mtDealId:''
      }
      this.timeModelList.push(arr)
      console.log(this.timeModelList)
      this.tableIndex = this.timeModelList.length-1
      console.log(this.tableIndex)
    },

    // 删除
    closeTimeSlot(index,item){
      this.$confirm('确认删除？').then(_ => {
        delMtMapping({id:item.id}).then(res=>{
          if (res.statusCode === '00000') {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.timeModelList.splice(index,1)
          }
        })
      })
      .catch(_ => {

      })
    },

    // 修改
    xiugai(index){
      this.tableIndex = index
      this.timeModelList[index].isXiugai = false
    },

    see(item){
      console.log(item)
      getMtMappingList({roomId:item.id}).then(res=>{
        if (res.statusCode === '00000') {
          this.mtdialog = true
          this.query.roomId = item.id
          this.query.storeId = item.storeId
          res.data.map(res=>{
            res.isXiugai = true
          })
          this.timeModelList = res.data
        }
      })
    },
    // // 房间列表
    // goRoomList(row){
    //  this.$router.push({path:`/room?roomKey=${row.storeId}`})
    // },
    // 删除店铺
    delBtn(row) {
      const that = this
      that.$confirm('确认删除？')
        .then(_ => {
          delRoom({
            roomId: row.id
          }).then(res => {
            if (res.statusCode === '00000') {
              that.getList()
            }
          })
        })
        .catch(_ => {

        })
    },
    // 获取列表
    getList() {
      pageRoom(this.params).then(res => {
        if (res.statusCode === '00000') {
          this.listData = res.data.records
          this.total = res.data.total
        }
      })
    },

    // 搜索按钮
    onSearch() {
      console.log(this.params)
      this.getList()
    },

    // 新增-弹窗
    addPop() {
      this.dialog = true
      this.mdl = {
        storeId: this.$route.query.roomKey
      }
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item)
      this.mdl = Object.assign({}, item)
      this.dialog = true
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
